<template>
  <div class="login">
    <div class="logo">
      <a href="/">
        <img src="../../public/Logo.png" alt="">
      </a>
    </div>
    <div class="main">
      <h4 class="title">
        <div class="normal-title">
          <a class="active" href="/sign_in">登录</a>
          <b>·</b>
          <a id="js-sign-up-btn" class="" href="/sign_up">注册</a>
        </div>
      </h4>
      <div class="input">
        <div class="input-username">
          <input type="text" placeholder="手机号或邮箱" v-model="username">
        </div>
        <div class="input-password">
          <input type="password" placeholder="请输入密码" v-model="password">
        </div>
      </div>
      <div class="remember-btn">
        <input type="checkbox" value="true" checked="checked"><span>记住我</span>
      </div>
      <div class="forget-btn">
        <a href="">登录遇到问题?</a>
        <!--          <ul class="dropdown-menu">-->
        <!--            <li><a href="/users/password/mobile_reset">用手机号重置密码</a></li>-->
        <!--            <li><a href="/users/password/email_reset">用邮箱重置密码</a></li>-->
        <!--            <li><a target="_blank" href="/p/9058d0b8711d">无法用海外手机号登录</a></li>-->
        <!--            <li><a target="_blank" href="/p/498a9fa7da08">无法用 Google 帐号登录</a></li>-->
        <!--          </ul>-->
      </div>
      <button class="sign-in-button" type="button" @click="check">
        登录
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      username: 'admin',
      password: 'admin'
    }
  },
  computed: {// 计算属性

  },
  mounted () { // 挂载
  },
  methods: { // 方法
    check () {
      this.axios.get('/api/user.json').then((res) => {
        const user = res.userNumber
        const { username, password } = user
        if (username === this.username && password === this.password) {
          this.$cookie.set('admin', username, 1)
          this.$store.dispatch('saveUserName', username)
          this.$router.push('/')
        } else {
          alert('账号密码错误')
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .login {
    height: 100%;
    box-sizing: border-box;
    min-height: 750px;
    text-align: center;
    font-size: 14px;
    background-color: #f1f1f1;

    .logo {
      position: absolute;
      top: 56px;
      margin-left: 50px;

      img {
        width: 100px;
      }
    }

    .main {
      box-sizing: border-box;
      width: 400px;
      margin: 120px auto 0;
      padding: 50px 50px 30px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 0 8px rgba(0, 0, 0, .1);
      vertical-align: middle;
      display: inline-block;

      .title {
        font-size: 18px;
        margin: 0 auto 50px;
        padding: 10px;
        font-weight: 400;
        color: #969696;

        .active {
          font-weight: 700;
          color: #ea6f5a;
          border-bottom: 2px solid #ea6f5a;
        }

        b {
          padding: 10px;
        }

        a {
          padding: 10px;
          color: #969696;
        }
      }

      .input {
        border-radius: 4px 4px 0 0;
        overflow: hidden;

        input {
          width: 100%;

          box-sizing: border-box;
          background-color: hsla(0, 0%, 71%, .1);
          vertical-align: middle;
          height: 50px;
          margin-bottom: 0;
          padding: 4px 12px 4px 35px;
          border: 1px solid #c8c8c8;
          outline: none;
        }

        .input-username, .input-password {
          position: relative;
        }
      }

      .remember-btn, .forget-btn {
        margin: 15px 0;

        span, a {
          margin-left: 5px;
          font-size: 15px;
          color: #969696;
        }
      }

      .remember-btn {
        float: left;
      }

      .forget-btn {
        float: right;
      }

      .sign-in-button {
        margin-top: 20px;
        width: 100%;
        padding: 9px 18px;
        font-size: 18px;
        border: none;
        border-radius: 25px;
        color: #fff;
        background-color: #3194d0;
        cursor: pointer;
        outline: none;
        display: block
      }
    }
  }
</style>
